{% extends "base.html" %}

{% block title %}
{{ current_user.name }} Todo List
{% endblock %}

{% block user %}
{{ current_user.name }}
{% endblock %}

{% block styles %}
{{super()}}
<style>
    .newTodo {
        font-size: 18px;
        background: #f7f7f7;
        width: 100%;
        padding: 13px 13px 13px 20px;
        box-sizing: border-box;
        color: #2980b9;
        background: #fff;
        border: 3px solid #c6e4f5;
    }

    .newTodo:focus {
        background: #fff;
        border: 3px solid #2980b9;
        outline: none;
    }
</style>
{% endblock %}



{% block content %}
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            {% include 'flash_message.html' %}
        </div>
        <h4 class="row page-header" style="text-align:center">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <form action=" {{ url_for('bp_todo.add') }}" method="POST">

                    <div style="margin-bottom: 15px; margin-top: -40px;">
                        <input type="radio" name="tag" value="default">
                        <div class="btn btn-default">Tag</div>
                        <input type="radio" name="tag" value="success">
                        <div class="btn btn-success">Tag</div>
                        <input type="radio" name="tag" value="info">
                        <div class="btn btn-info">Tag</div>
                        <input type="radio" name="tag" value="warning">
                        <div class="btn btn-warning">Tag</div>
                        <input type="radio" name="tag" value="danger">
                        <div class="btn btn-danger">Tag</div>

                    </div>


                    <input class="newTodo" type="text" name="todo" placeholder="Add New Todo Here" minlength="1"
                        maxlength="120" style="width: 500px;">

                    <button type="submit" class="btn btn-primary">Add</button>

                    </select>
                </form>
            </div>
        </h4>

        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <table class="table table-striped table-bordered table-hover">
                <thead>
                    <tr>
                        <th>任务</th>
                        <th>创建时间</th>
                        <th style="text-align: center;">置顶</th>
                        <th style="text-align: center;">完成</th>
                        <th style="text-align: center;">删除</th>
                    </tr>
                </thead>
                <tbody>
                    {% for todo in todos%}

                    <tr class="{{ todo[4] }}" {% if todo[3] %} style="text-decoration: line-through" {% endif %}>
                        <td>{{ todo[1] }}</td>
                        <td>{{ todo[2] }}</td>
                        <td style="text-align: center;">
                            {% if todo[5] %}
                            <a href="{{ url_for('bp_todo.down', todoid=todo[0]) }}">
                                <span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>
                            </a>
                            {% else %}
                            <a href="{{ url_for('bp_todo.top', todoid=todo[0]) }}">
                                <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
                            </a>
                            {% endif %}

                        </td>
                        <td style="text-align: center;">
                            <a href="{{ url_for('bp_todo.finish', todoid=todo[0]) }}">
                                {% if todo[3] %}
                                <span class="glyphicon glyphicon-check" aria-hidden="true"></span>
                                {% else %}
                                <span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span>
                                {% endif %}
                            </a>
                        </td>
                        <td style="text-align: center;">
                            <a href="{{ url_for('bp_todo.delete', todoid=todo[0]) }}">
                                <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                            </a>
                        </td>
                    </tr>
                    {% endfor %}

                </tbody>
            </table>

        </div>
    </div>


</div>
{% endblock %}